<template>
  <div id="mainportal" class="container" style="overflow: auto;background-color: #fff;">

  <comhead title="订单详情" isLeftIcon="true" leftIconName="angle-left" @leftClick="foBack()" isRightIcon="true" rightIconName="ellipsis-h" @rightClick="updataActive()"></comhead>
   




    
<div  style='background-color:#f5f5f5;height:100vh;width:100%;border-bottom:solid 1px #e5e5e5;'>

  <div  style="background-color:#fff;height:80px;display: flex;align-items: center;padding-left:20px;" 
  :style="handleOrderStatus()">
  
  <div>
    <span v-if="orderinfo.orderStatus === 'ORDER_WAIT_PAY'">订单待付款</span>
    <span v-if="orderinfo.orderStatus === 'ORDER_WAIT_SENDGOODS'">等待商家发货</span>
    <span v-if="orderinfo.orderStatus === 'ORDER_CANCEL_PAY'" >订单已关闭</span>
    <span v-if="orderinfo.orderStatus === 'ORDER_WAIT_RECVGOODS'">等待买家收货</span>
    <span v-if="orderinfo.orderStatus === 'ORDER_WAIT_REdiv'">订单已完成，待评价</span>
    <span v-if="orderinfo.orderStatus === 'ORDER_END_GOODS'">订单已完成</span>
<div style='font-size:14px;opacity:0.6;'>
 {{orderinfo.refundStatus=='APPLY_REFUND'&& orderinfo.orderStatus !=='ORDER_END_GOODS'?'申请退款中':''}}
    {{orderinfo.refundStatus=='WAIT_REFUND'&& orderinfo.orderStatus !=='ORDER_END_GOODS'?'卖家退款中':''}}
    {{orderinfo.refundStatus=='SUCCEED_REFUND'&& orderinfo.orderStatus !=='ORDER_END_GOODS'?'退款成功':''}}
    {{orderinfo.refundStatus=='END_ORDER'&& orderinfo.orderStatus !=='ORDER_END_GOODS'?'订单完成7天后不能退款':''}}
    {{  orderinfo.refundStatus=='FAIL_REFUND'&& orderinfo.orderStatus !=='ORDER_END_GOODS'?'退款申请失败':''}}
    </div>
</div>


    <!-- <div style='font-size:14px;'> 订单金额（含运费）:￥</div> -->
  </div>
  <div style='height:10px;'></div>
  <div style='background-color:#fff;padding:10px;display:flex;align-items:center;border-top: 1px solid #e5e5e5;border-bottom:solid 1px #e5e5e5;'>
    <div style='display:flex;align-items:center'>
      <img src='../../image/like1@2x.png'
        style='width:25px;height:25px;margin:10px'/>
    </div>
    <div style='overflow: hidden;'>
      <div style='font-weight: 800;font-size:14px;'>
        <span style='margin-right:10px;'>{{orderinfo.contactName}}</span>
        <span>{{orderinfo.contactPhone}}</span>
      </div>
      <div style='font-size:14px;    overflow: hidden;text-overflow: ellipsis;'>

        <span>{{orderinfo.provinceName}}</span>
        <span>{{orderinfo.cityName}}</span>
        <span>{{orderinfo.countryName}}</span>
        <span>{{orderinfo.address}}</span> </div>
    </div>
  </div>

  <div style='height:10px;'></div>
<div style='border-bottom:solid 1px #e5e5e5;border-top:solid 1px #e5e5e5;'>
  
  <div>
        <div v-for="item in orderinfo.detailList" style='background-color:#fff;'>

    <div  style='margin-left:20px;display:flex;align-items:center' @click='goPdDatil(item.goodsId)' >
      <div style='display:flex;align-items:center;border-bottom:solid 1px #e5e5e5;width:100%;'>
        <div>
          <img :src='item.goodsIcon' style='width:80px;height:80px;margin: 10px 0;'/>
        </div>
        <div style='margin-left:20px;font-size:14px;height:40px;overflow: hidden;text-overflow: ellipsis;flex:1'>{{item.goodsName}}<span v-if="item.goodsModelNumber!=''||item.goodsModelNumber">({{item.goodsModelNumber}})</span></div>
        <div>
          <div style='text-align:right;font-size:14px;padding-right:20px;'>
            <div style='color:#ff9800'>￥{{item.price}}</div>
            <div>X {{item.num}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>


  <div class='bett'>
    <div>商品小计</div>
    <div style='color:#ff9800'>￥{{orderinfo.payTotal}}</div>

  </div>
  <div class='bett'>
    <div>运费</div>
    <div style='color:#ff9800'>￥0</div>
  </div>

  <div class='bett'>
    <div>订单金额</div>
    <div style='color:#ff9800'>￥{{orderinfo.payTotal}}</div>
  </div>
  <div class='bett'>
    <div style='white-space:nowrap;'>备注</div>
    <div style='color:#ff9800;max-width:70%;word-wrap:break-word;'><span>{{orderinfo.orderRemark ?orderinfo.orderRemark:''}}</span></div>
  </div>
  </div>


  <div style='height:10px;'></div>

<div style='border-bottom:solid 1px #e5e5e5;border-top:solid 1px #e5e5e5;'>
<div style='background-color:#fff;font-size:14px;padding:0 20px;border-bottom:solid 1px #e5e5e5;'>
  <div style='display: flex;align-items: center;'>
    <div style='padding:10px 0;flex:1'> 订单 <span id="orderid">{{orderinfo.orderId}}</span></div>

    <div style='wdith:75px;padding:10px 0;display: flex;align-items: center;' catchtap="copyOrderId">
      <button class="buttonView"  @click="copyToClipboard('orderid')">
           复制
      </button>
    </div>
</div>
  </div>
  <div style='background-color:#fff;font-size:14px;padding:0 0 0 20px;'>
    <div style='padding:10px 0;'> 创建时间 {{orderinfo.createTime}}</div>
  </div>
</div>
  <div style='height:125px;'></div>
  <div class='btmBox' v-if="orderinfo.orderStatus !=='ORDER_CANCEL_PAY'">


<div style='display: flex;align-items: center;margin-right:20px;' >
    <button class="buttonView"  v-if="orderinfo.orderStatus !=='ORDER_WAIT_PAY' && orderinfo.orderStatus !=='ORDER_CANCEL_PAY' && orderinfo.refundStatus=='WITHOUT_REFUND' && orderinfo.orderStatus !=='ORDER_END_GOODS' ||orderinfo.refundStatus=='FAIL_REFUND'"  @click='refund'>{{  orderinfo.refundStatus=='FAIL_REFUND'?'重新退款':'退款'}}</button>
      <button class="buttonView"   v-if="orderinfo.refundStatus=='WAIT_REFUND'"  @click='succedRefund' >确认退款</button>
</div>


<div style='display: flex;align-items: center;margin-right:20px;' v-if="orderinfo.orderStatus === 'ORDER_WAIT_PAY'">
   <button class="buttonView"  @click='delOrder'     >取消订单</button>
</div>

<div style='display: flex;align-items: center;margin-right:20px;' v-if="orderinfo.orderStatus === 'ORDER_WAIT_PAY'">
   <button class="buttonView"    @click='payOrder' style='background-color:rgb(229, 28, 35);color:#fff;'>支付订单</button>
</div>
 
<div style='display: flex;align-items: center;margin-right:20px;' v-if="orderinfo.orderStatus === 'ORDER_WAIT_RECVGOODS' || orderinfo.orderStatus === 'ORDER_END_GOODS'">
   <button  class="buttonView"   @click='goShip' >查看物流</button>
</div>
 
 
<div style='display: flex;align-items: center;margin-right:20px;' v-if="orderinfo.orderStatus === 'ORDER_WAIT_RECVGOODS'">
   <button  class="buttonView"   @click='recvGoods' style='background-color:rgb(229, 28, 35);color:#fff;'>确认收货</button>
</div>



<!-- 
       <div >
        <div  class='btn-items'
        style=' border:solid 1px #e5e5e5;'>取消订单</div>
        <div catchtap='payOrder' data-index='{{index}}' data-orderid='{{item.orderId}}' class='btn-items' style='background-color:#fa5555;color:#fff;border:1px solid #fa5555;'>支付订单</div>
      </div>


         <div style='display:flex;align-items: center;' v-if="{{item.orderStatus === 'ORDER_WAIT_RECVGOODS' || item.orderStatus === 'ORDER_END_GOODS'  }}">

               <div catchtap='goShip' data-index='{{index}}' data-orderid='{{item.orderId}}' class='btn-items' style='border-top: solid 1px #e5e5e5;border-right: solid 1px #e5e5e5;'>查看物流</div> 

     <div catchtap='recvGoods' v-if="{{item.orderStatus === 'ORDER_WAIT_RECVGOODS' }}" data-index='{{index}}' data-orderid='{{item.orderId}}' class='btn-items' style='background-color:#fa5555;color:#fff;border:1px solid #fa5555;'>确认收货</div>
      </div> 
 -->








  </div>
</div>



  </div>
</template>

 
 

<script>
import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";
import { Indicator } from "mint-ui";
import { Tabbar, TabItem } from "mint-ui";
import { TabContainer, TabContainerItem } from "mint-ui";
import comhead from "../../common/coffee/Comhead";

export default {
  data() {
    return {
      orderId: "",
      orderinfo: []
    };
  },
  computed: {},

  methods: {
    payOrder(){

   window.location.href =
              "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx96cb7807594e0d20&redirect_uri=https://api-merchant.nanxinwang.com/bizapi/wechat/enter/call?action=divtest&response_type=code&scope=snsapi_base&state=" +
              this.orderinfo.payNo +
              "#wechat_redirect";
    },
    goShip(){
        this.$router.push({
           name:'ship',
           query:{
             orderid : this.orderinfo.orderId
           }
        })
    },
    succedRefund() {

      let self = this;
      MessageBox.confirm("确定退款？").then(action => {
        if (action) {
          let url = this.$baseUrl.bizUrl + "/order/refund/succeed";
          let data = {
            token: this.$store.getters.getLoginStatus.token,
            userId: this.$store.getters.getLoginStatus.userId,
            orderId: self.orderinfo.orderId
          };
          let callBack = res => {
            if (res == null) {
              console.log("网络请求错误1！");
              return;
            }

            if (res.data.status != 200) {
              console.log(res.data);
              console.log("网络请求错误2！");
              return;
            }

            if (res.data.status == 200) {
              Toast({
                message: "成功"
              });
              self.getOrderInfo(self.orderinfo.orderId);
            }
          };
          this.$reqFormPost(url, data, callBack);
        }
      });
    },
    refund() {
      this.$router.push({
        name: "refund",
        query: {
          orderid: this.orderinfo.orderId,
          paytotal: this.orderinfo.payTotal
        }
      });
    },
    delOrder(e) {
      let self = this;

      MessageBox.confirm("确定关闭该订单？").then(action => {
        if (action) {
          let url = this.$baseUrl.bizUrl + "/order/cancel";
          let data = {
            token: this.$store.getters.getLoginStatus.token,
            userId: this.$store.getters.getLoginStatus.userId,
            orderId: self.orderinfo.orderId
          };
          let callBack = res => {
            if (res == null) {
              console.log("网络请求错误！");
              return;
            }

            if (res.data.status != 200) {
              console.log("请求数据错误");
              return;
            }
            if (res.data.status === 200) {
              self.getOrderInfo(self.orderinfo.orderId);
              Toast({
                message: "取消成功"
              });
            }
          };
          this.$reqFormPost(url, data, callBack);
        }
      });
    },

    //确认收货
    recvGoods(e) {
      let optmessage = "确认收货?";
      if (
        this.orderinfo.refundStatus === "APPLY_REFUND" ||
        this.orderinfo.refundStatus === "WAIT_REFUND"
      ) {
        optmessage = "订单正在退款，是否" + optmessage;
      }
      let self = this;
      MessageBox.confirm(optmessage).then(action => {
        if (action) {
          let url = this.$baseUrl.bizUrl + "/order/recvgoods";
          let data = {
            token: this.$store.getters.getLoginStatus.token,
            userId: this.$store.getters.getLoginStatus.userId,
            orderId: self.orderinfo.orderId
          };

          let callBack = res => {
            if (res == null) {
              console.log("网络请求错误3！");
              return;
            }

            if (res.data.status != 200) {
              console.log("请求数据错误3");
              return;
            }
            if (res.data.status == 200) {
              console.log("确认收货", res);
              self.getOrderInfo(self.orderinfo.orderId);
            }
          };
          this.$reqFormPost(url, data, callBack);
        }
      });
    },
    copyToClipboard(elementId) {
      // Create an auxiliary hidden input
      var aux = document.createElement("input");

      // Get the text from the element passed into the input
      aux.setAttribute("value", document.getElementById(elementId).innerHTML);

      // Append the aux input to the body
      document.body.appendChild(aux);

      // Highlight the content
      aux.select();

      // Execute the copy command
      document.execCommand("copy");

      // Remove the input from the body
      document.body.removeChild(aux);
      Toast({
        message: "复制成功"
      });
    },
    handleOrderStatus() {
      //   orderinfo.orderStatus === 'ORDER_CANCEL_PAY'?:'',
      //   orderinfo.orderStatus === 'ORDER_WAIT_PAY'?'background-color:rgb(246, 175, 42);color:#fff;':'',
      // orderinfo.orderStatus === 'ORDER_WAIT_SENDGOODS'?'background-color:#3f9ded;color:#fff;':'',
      // orderinfo.orderStatus === 'ORDER_WAIT_RECVGOODS'?'background-color:#28b8a6;color:#fff;':'',
      //   orderinfo.orderStatus === "ORDER_END_GOODS"
      //     ? "background-color:#12b72b;color:#fff;"
      //     : "";

      switch (this.orderinfo.orderStatus) {
        case "ORDER_CANCEL_PAY":
          return "background-color:#999;color:#fff;";
        case "ORDER_WAIT_PAY":
          return "background-color:rgb(246, 175, 42);color:#fff;";
        case "ORDER_WAIT_SENDGOODS":
          return "background-color:#3f9ded;color:#fff;";
        case "ORDER_WAIT_RECVGOODS":
          return "background-color:#28b8a6;color:#fff;";
        case "ORDER_END_GOODS":
          return "background-color:#12b72b;color:#fff;";
      }
    },
    getOrderInfo(orderid) {
      let self = this;
      let url = this.$baseUrl.bizUrl + "/order/queryorderdetail";
      let data = {
        token: this.$store.getters.getLoginStatus.token,
        userId: this.$store.getters.getLoginStatus.userId,
        orderId: orderid
      };
      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }
        if (res.data.status != 200) {
          console.log("请求数据错误" + url);
          return;
        }
        if (res.data.status === 200) {
          this.orderinfo = res.data.data;
        
        
        }
      };
      this.$reqFormPost(url, data, callBack);
    },
    goSign() {
      this.$router.push({ name: "sign" });
    },
    foBack() {
      this.$router.go(-1);
    }
  },
  mounted() {
    document.title ='订单详情'
    this.orderId = this.$route.query.orderid;
    this.getOrderInfo(this.orderId);
  },
  components: {
    Tabbar,
    TabItem,
    TabContainer,
    TabContainerItem,
    comhead,
    Swipe,
    SwipeItem
  }
};
</script>
<style>
.bett {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 5px 20px;
  font-size: 14px;
}
.btmBox {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 55px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid #e5e5e5;
}
.buttonView {
  font-size: 14px !important;
  background-color: #fff;
  margin: 0 !important;
  border: 1px !important;
}
</style>



<!-- Add "scoped" attribute to limit CSS to this component only -->
